import React from 'react'

export default function index({ list, clearCompleted, type, typeChange }) {
  return (
    <footer className='footer'>
      <span className='todo-count'>
        <strong>{list.filter(item => !item.flag).length}</strong> item left
      </span>
      <ul className='filters'>
        <li>
          <a onClick={() => typeChange('all')} className={type === 'all' ? 'all selected' : 'all'} href='#/'>
            All
          </a>
        </li>
        <li>
          <a onClick={() => typeChange('active')} className={type === 'active' ? 'active selected' : 'active'} href='#/active'>
            Active
          </a>
        </li>
        <li>
          <a onClick={() => typeChange('completed')} className={type === 'completed' ? 'completed selected' : 'completed'} href='#/completed'>
            Completed
          </a>
        </li>
      </ul>
      <button className='clear-completed' onClick={clearCompleted}>Clear completed</button>
    </footer>
  )
}